<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <title>博客后台管理 - 分类管理</title>
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="default">
        <link rel="stylesheet" type="text/css" href="./css/materialdesignicons.min.css">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./css/style.min.css">
        <link rel="stylesheet" href="./elementui/index.min.css">
        <style>
            /* v-cloak 隐藏未渲染的DOM */
            [v-cloak] {
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <el-row style="padding: 15px;">
                <el-card class="box-card">
                    <el-button type="primary" size="small" @click="showAddCategoryDialog()">添加分类</el-button>
                </el-card>

                <el-card class="box-card" style="margin-top: 15px;">
                    <el-button @click="deleteCategoryBatch" type="danger" size="small"
                        style="margin-bottom: 5px;">批量删除</el-button>
                    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column align="center" type="selection" width="50">
                        </el-table-column>
                        <el-table-column align="center" prop="id" label="ID" width="80">
                        </el-table-column>
                        <el-table-column :fit="true" align="center" prop="name" label="名称">
                        </el-table-column>
                        </el-table-column>
                        <el-table-column align="center" fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="editCategory(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" style="color: red;"
                                    @click="deleteCategory(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-row>

            <!-- 添加分类对话框 -->
            <el-dialog title="添加分类" :visible.sync="addCateFormVisible" :close-on-click-modal="false" width="40%" center>
                <el-form :model="addCateForm">
                    <el-form-item label="分类名称" label-width="80px">
                        <el-input v-model="addCateForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addCateFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addCateSubmit()">确定</el-button>
                </div>
            </el-dialog>

            <!-- 编辑分类对话框 -->
            <el-dialog title="编辑分类" :visible.sync="editCateFormVisible" :close-on-click-modal="false" width="40%"
                center>
                <el-form :model="editCateForm">
                    <el-form-item label="分类名称" label-width="80px">
                        <el-input v-model="editCateForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editCateFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="editCateSubmit()">确定</el-button>
                </div>
            </el-dialog>
        </div>

        <script type="text/javascript" src="./js/jquery.min.js"></script>
        <script type="text/javascript" src="./js/main.min.js"></script>
        <script src="./elementui/vue.min.js"></script>
        <script src="./elementui/index.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    // 添加分类对话框是否显示
                    addCateFormVisible: false,
                    // 添加分类表单数据
                    addCateForm: {
                        name: '',
                    },
                    // 编辑分类对话框是否显示
                    editCateFormVisible: false,
                    // 编辑分类表单数据
                    editCateForm: {
                        id: 0,
                        name: '',
                    },
                    // 多选框选中数据
                    multipleSelection: [],
                    // 分类列表数据
                    tableData: [],
                },
                methods: {
                    // 显示添加分类对话框
                    showAddCategoryDialog() {
                        this.addCateFormVisible = true;
                    },

                    // 提交添加分类
                    addCateSubmit() {
                        if (!this.addCateForm.name) {
                            return this.$message.warning('请输入分类名称');
                        }
                        fetch("http://127.0.0.1:5588/admin/categories", {
                            method: "POST",
                            headers: {
                                "Authorization": sessionStorage.getItem('token') || '',
                            },
                            body: JSON.stringify({
                                name: this.addCateForm.name,
                            }),
                        })
                            .then((response) => response.json())
                            .then(res => {
                                if (res.code != 200) {
                                    return this.$message.error(res.msg);
                                }

                                this.$message.success('添加成功');
                                this.addCateFormVisible = false;
                                this.addCateForm.name = '';
                                // 重新获取分类列表
                                this.getCategoryList();
                            })
                            .catch((error) => {
                                console.error(error);
                            });
                    },

                    // 显示编辑分类对话框
                    editCategory(row) {
                        this.editCateForm.id = row.id;
                        this.editCateForm.name = row.name;
                        this.editCateFormVisible = true;
                    },

                    // 提交编辑分类
                    editCateSubmit() {
                        if (!this.editCateForm.name) {
                            return this.$message.warning('请输入分类名称');
                        }
                        fetch("http://127.0.0.1:5588/admin/categories", {
                            method: "PUT",
                            headers: {
                                "Authorization": sessionStorage.getItem('token') || '',
                            },
                            body: JSON.stringify(this.editCateForm),
                        })
                            .then((response) => response.json())
                            .then(res => {
                                if (res.code != 200) {
                                    return this.$message.error(res.msg);
                                }

                                this.$message.success('操作成功');
                                this.editCateFormVisible = false;
                                this.editCateForm.id = 0;
                                this.editCateForm.name = '';
                                // 重新获取分类列表
                                this.getCategoryList();
                            })
                            .catch((error) => {
                                console.error(error);
                            });
                    },

                    // 批量删除分类
                    deleteCategoryBatch() {
                        if (!this.multipleSelection || this.multipleSelection.length === 0) {
                            return this.$message.warning('请选择要删除的分类');
                        }

                        this.$confirm('确定删除选中的分类吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            let ids = [];
                            this.multipleSelection.forEach(item => {
                                ids.push(item.id);
                            });

                            // 提交批量删除
                            fetch("http://127.0.0.1:5588/admin/categories/batchDelete", {
                                method: "POST",
                                headers: {
                                    "Authorization": sessionStorage.getItem('token') || '',
                                },
                                body: JSON.stringify({
                                    ids: ids,
                                }),
                            })
                                .then((response) => response.json())
                                .then(res => {
                                    if (res.code != 200) {
                                        return this.$message.error(res.msg);
                                    }

                                    this.$message.success('操作成功!');
                                    // 重新加载列表
                                    this.getCategoryList();
                                })
                                .catch((err) => {
                                    console.error("Error:", err);
                                });

                        })
                    },

                    // 多选框选择事件
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                    },

                    // 行删除分类
                    deleteCategory(id) {
                        this.$confirm('确定删除该分类吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            // 提交删除
                            fetch(`http://127.0.0.1:5588/admin/categories/${id}`, {
                                method: "DELETE",
                                headers: {
                                    "Authorization": sessionStorage.getItem('token') || '',
                                }
                            })
                                .then((response) => response.json())
                                .then(res => {
                                    if (res.code != 200) {
                                        return this.$message.error(res.msg);
                                    }

                                    this.$message.success('操作成功!');
                                    // 重新加载列表
                                    this.getCategoryList();
                                })
                                .catch((err) => {
                                    console.error("Error:", err);
                                });
                        })
                    },

                    // 获取分类列表
                    getCategoryList() {
                        fetch('http://127.0.0.1:5588/admin/categories', {
                            method: "GET",
                            headers: {
                                "Authorization": sessionStorage.getItem('token') || '',
                            },
                        })
                            .then((response) => response.json())
                            .then(res => {
                                if (res.code != 200) {
                                    return this.$message.error(res.msg);
                                }

                                this.tableData = res.data;
                            })
                            .catch((err) => {
                                console.error("Error:", err);
                            });
                    }
                },
                mounted() {
                    // 获取分类列表
                    this.getCategoryList();
                }
            });
        </script>
    </body>

</html>